{% extends "crawlermanage/index.html" %}
{% block head %}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>爬虫后台管理系统</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../static/style/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../static/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../static/dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet" href="../../static/plugins/iCheck/flat/blue.css">

  <link rel="stylesheet" href="../../static/plugins/datatables/dataTables.bootstrap.css">
  <link rel="stylesheet" href="../../static/plugins/bootstrap3-editable/css/bootstrap-editable.css">
</head>
{% endblock %}
{% block sidebar %}
      <ul class="sidebar-menu">
        <li class="header">主控面板</li>
        <li>
          <a href="{% url 'tasks' %}">
            <i class="fa fa-dashboard"></i> <span>爬虫状态</span>
          </a>
        </li>
        <li>
          <a href="{%url 'layout'%}">
            <i class="fa fa-tasks"></i> <span>布置任务</span>
            <!-- <span class="pull-right-container">
              <small class="label pull-right bg-green">new</small>
            </span> -->
          </a>
        </li>
          <li>
          <a href="{% url 'machinelist' %}">
            <i class="fa fa-medium"></i> <span>从机管理</span>
          </a>
        </li>
        <li class="active">
          <a href="{% url 'processlist' %}">
            <i class="fa fa-th-large"></i> <span>进程管理</span>
          </a>
        </li>
          <li class="treeview">
          <a href="#">
            <i class="fa fa-sort-alpha-asc"></i> <span>自动结构</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="{%url 'extractsinger' %}"><i class="fa fa-circle-o"></i>正文抽取</a></li>
            <li><a href="{%url 'extractmultiple' %}"><i class="fa fa-circle-o"></i>批量抽取</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-map-o"></i> <span>正文测试</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="{%url 'extractarticle' %}"><i class="fa fa-circle-o"></i>批量抽取</a></li>
            <li><a href="{%url 'testarticles' %}"><i class="fa fa-circle-o"></i>批量测试</a></li>
         <li><a href="{%url 'testsingle' %}"><i class="fa fa-circle-o"></i>单例测试</a ></li>
          </ul>
        </li>
        <li>
          <a href="{% url 'charts' %}">
            <i class="fa fa-pie-chart"></i> <span>数据统计</span>
          </a>
        </li>
        <li>
          <a href="{% url 'introduce'%}">
            <i class="fa fa-book"></i> <span>使用说明</span>
          </a>
        </li>

        <li>
          <a href="{% url 'settings' %}">
            <i class="fa fa-cog"></i> <span>系统设置</span>
          </a>
        </li>
      </ul>
{% endblock %}
{% block maincontent %}
<div class="row">
    <div class="col-xs-12">
      <div class="box" style="border-top:0px;">
        <div class="box-header">
          <h3 class="box-title">进程管理</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive">
        <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>主机</th>
            <th>PID</th>
            <th>任务ID</th>
              <th>任务名</th>
            <th>爬虫状态</th>
          </tr>
        </thead>
        <tbody>
          {% for i in pc_name %}
          <tr>
            <td>{{i.0.id}}</td>
            <td>{{i.0.localhost}}</td>
            <td>{{i.0.pid}}</td>
            <td>{{i.0.taskid}}</td>
              <td>{{i.1}}</td>
            <td>

             {% ifequal i.0.status 'running' %}
                <span id="span_{{i.0.id}}" class="label label-success" >
                    <a href="#" id="status_{{i.0.id}}" class="editable editable-click" onclick="changeStatus('{{i.0.id}}', 'running')" style="color: white; text-decoration: none">执行</a>
                </span>
                {%endifequal%}
                {% ifequal i.0.status 'pausing'  %}
                 <span id="span_{{i.0.id}}" class="label label-warning" >
                    <a href="#" id="status_{{i.0.id}}" class="editable editable-click" onclick="changeStatus('{{i.0.id}}', 'pausing')" style="color: white; text-decoration: none">挂起</a>
                 </span>
                {%endifequal%}
                {% ifequal i.0.status 'stopping'  %}
                 <span id="span_{{i.0.id}}" class="label label-danger" >
                    <a href="#" id="status_{{i.0.id}}" class="editable editable-click" style="color: white; text-decoration: none">停止</a>
                 </span>
                {%endifequal%}
            </td>
            <!--<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>-->
            <!-- <td><a href="{%url 'newsdata'%}?taskid={{i.id}}">结果</a><span>-</span><a href="{%url 'taskdetail'%}?taskid={{i.id}}">管理</a></td> -->
          </tr>
          {% endfor %}
        </tbody>
  </table>
  <div>
    <div id="pagination_div1">
        <ul class="pagination" >
        共 <span  class="badge">{{p.p_count}}</span> 条记录，总 <span  class="badge">{{p.p_pages}}</span> 页，当前在<span class="badge">{{p.page}}</span>页
        </ul>
    </div>
    <div id="pagination_div2">
        <nav>
            <ul class="pagination" >
                <li><a href="{%url 'processlist' %}?page={{p.p_previous}}">&laquo;</a></li>
                <li> <a href="{%url 'processlist' %}?page=1">首页</a></li>
                    {% for i in p.p_range %}
                        <li  {% ifequal p.p_id i %} class="active" {% endifequal %}><a href="{%url 'processlist' %}?page={{i}}">{{i}}</a></li>
                    {% endfor %}
                <li> <a href="{%url 'processlist' %}?page={{p.p_pages}}">尾页</a></li>
                <li><a href="{%url 'processlist' %}?page={{p.p_next}}">&raquo;</a></li>
            </ul>
        </nav>
    </div>
  </div>
        <!-- 服务器分页结束 -->
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
</div>
			          <!-- row -->
{% endblock %}

{% block script %}
<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../static/bootstrap/js/bootstrap.min.js"></script>
<script src="../../static/dist/js/app.min.js"></script>
<script src="../../static/dist/js/demo.js"></script>

<script src="../../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../../static/plugins/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script>
  $(function () {
    // $("#example1").DataTable();
    $('#example1').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": false,
      "info": true,
      "autoWidth": false
    });

    // $('.editable').editable({
    //     type: "select",
    //     source: [{ value: 1, text: "正在运行" }, { value: 2, text: "等待运行" }, {value:3,text:"任务结束"}],

    //     emptytext: "空文本",       //空值的默认文本
    //     mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popup
    //     validate: function (value) { //字段验证
    //         if(value==1){
    //           $('#status_span').attr("class","label label-success")

    //         }else if(value==2){
    //           $('#status_span').attr("class","label label-warning")

    //         }else if(value==3){
    //           $('#status_span').attr("class","label label-primary")

    //         }else{
    //           return '不能为空';
    //         }
    //     }


    // });

  });

  function changeStatus(id, status) {
    $('#status_'+id).editable({
        type: "select",
        value: status,
        source: [{ value: 'running', text: "运行" }, { value: 'pausing', text: "暂停" }, {value:'stopping',text:"停止"}],
        emptytext: "空文本",       //空值的默认文本
        mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popup
        validate: function (value) { //字段验证
            if(value=='running'){
              $('#span_'+id).attr("class","label label-success")

            }else if(value=='pausing'){
              $('#span_'+id).attr("class","label label-warning")

            }else if(value=='stopping'){
              $('#span_'+id).attr("class","label label-primary")

            }else{
              return '不能为空';
            }
        },
        url: function (params) { 
            return $.post('/crawlermanage/edittask/', { 
                op: params.value,
                taskid: id,
            }, function(data) {
                if(data!=null) {
                  page = "{{page}}"
                  if(page==''){
                    page = 1
                  }
                  if (data['status']=='success' && data['taskstatus']=='stopping') {
                    location.href = '/crawlermanage/tasks?page='+page
                  }
                }
            }, 'json'); 
        }
    });
  }



  function changeStatus(id, status) {
    $('#status_'+id).editable({
        type: "select",
        value: status,
        source: [{ value: 'running', text: "执行" }, { value: 'pausing', text: "挂起" }, {value:'stopping',text:"停止"}],
        emptytext: "空文本",       //空值的默认文本
        mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popup
        validate: function (value) { //字段验证
            if(value=='running'){
              $('#span_'+id).attr("class","label label-success")

            }else if(value=='pausing'){
              $('#span_'+id).attr("class","label label-warning")

            }else if(value=='stopping'){
              $('#span_'+id).attr("class","label label-danger")

            }else{
              return '不能为空';
            }
        },
        url: function (params) { 
            return $.post('/crawlermanage/editprocess/', { 
                op: params.value,
                processid: id,
            }, function(data) {
                if(data!=null) {
                  page = "{{page}}"
                  if(page==''){
                    page = 1
                  }
                  //if (data['status']=='success' && data['process_status']=='stopping') {
                  //  location.href = '/crawlermanage/processlist?page='+page
                  //}
                  //setTimeout(function () {
                  //  location.href = '/crawlermanage/processlist?page='+page
                  //}, 2000);
                }
            }, 'json'); 
        }
    });
  }
</script>
{% endblock %}